<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date" %>
<%@ page info="This in index.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜品分类</title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	</head>
	<body>
		<!-- 表格数据 -->
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<!-- 填写表单 -->
		<form class="layui-form" id="addform" style="display:none">
			<div class="layui-form-item">
				<label class="layui-form-label">菜品分类</label>
				<div class="layui-input-block">
					<input type="text" name="typename" required lay-verify="required" placeholder="请输入菜品分类"
						autocomplete="on" class="layui-input" id="typename" style="width:300px">
				</div>
			</div>
		</form>






		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
				<!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
			</div>
		</script>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>


		<script src="../js/jquery-3.4.1.js" charset="utf-8"></script>
		<script src="../layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

		<script>
			layui.use('table', function() {
				var table = layui.table;

				table.render({
					elem: '#test',
					url: 'http://localhost/foodtype/pagelist',
					toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
						,
					// defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
					// 	title: '提示',
					// 	layEvent: 'LAYTABLE_TIPS',
					// 	icon: 'layui-icon-tips'
					// }],
					width: 1300,
					height: 540,
					title: '菜品分类',
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'id',
							title: 'ID',
							width: 80,
							fixed: 'left',
							unresize: true,
							sort: true
						}, {
							field: 'typename',
							title: '菜品类型',
							width: 1000,

						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
							width: 150
						}]
					],
					initSort: {
						field: 'id' //排序字段，对应 cols 设定的各字段名
							,
						type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
					},
					page: true
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;
							layer.alert(JSON.stringify(data));
							break;
						case 'getCheckLength':
							var data = checkStatus.data;
							layer.msg('选中了：' + data.length + ' 个');
							break;
						case 'isAll':
							layer.msg(checkStatus.isAll ? '全选' : '未全选');
							break;

							//自定义头工具栏右侧图标 - 提示
						case 'LAYTABLE_TIPS':
							layer.alert('这是工具栏右侧自定义的一个图标按钮');
							break;

						case 'add':
							layer.open({
								type: 1,
								// area: ['500px', '600px'],
								offset: ['40px', '400px'],
								title: '添加数据',
								content: $("#addform"),
								shade: 0,
								btn: ['提交', '重置'],
								zIndex: 9999999,
								moveOut: true,
								btn1: function(index, layero) {
									var typename = $("#typename").val();
									if (typename != "") {
										$.ajax({
											//请求方式
											type: "POST",
											//请求的媒体类型
											// contentType: "application/json;charset=UTF-8",
											//请求地址
											url: "http://localhost/foodtype/add",
											//数据，json字符串
											data: {
												typename: typename
											},
											// data : JSON.stringify(list),
											//请求成功
											success: function(result) {
												// 获取当前页码
												let currpage = $('.layui-laypage-em')
													.next().text();
												var data = $.parseJSON(result);
												if (data.code == 0) {
													$("#addform")[0].reset();
													table.reload("test", {
														page: {
															curr: currpage
														}
													});
													layer.closeAll();
												} else {
													layer.msg(data.msg);
													layer.closeAll();
												}

											}
										});
									} else {
										layer.msg("你填空的，玩个锤子!!!");
									}
								},
								btn2: function(index, layero) {
									$("#addform")[0].reset();
									return false;
								},
								cancel: function(layero, index) {
									layer.closeAll();
									$("#addform")[0].reset();
								}

							});

							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					//console.log(obj)
					if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							// console.log(data);
							// console.log(index);
							$.ajax({
								//请求方式
								type: "POST",
								//请求的媒体类型
								// contentType: "application/json;charset=UTF-8",
								//请求地址
								url: "http://localhost/foodtype/delete",
								//数据，json字符串
								data: data,
								// data : JSON.stringify(list),
								//请求成功
								success: function(result) {
									var data = $.parseJSON(result);
									if (data.code == 0) {
										table.reload("test", {
											page: {
												curr: 1
											}
										});
										layer.close(index);
									} else {
										layer.msg(data.msg);
										layer.close(index);
									}

								}
							});
							// layer.close(index);
						});
					} else if (obj.event === 'edit') {
						layer.open({
							type: 1,
							// area: ['500px', '600px'],
							offset: ['40px', '400px'],
							title: '修改数据',
							content: $("#addform"),
							shade: 0,
							btn: ['修改'],
							zIndex: 9999999,
							moveOut: true,
							success: function(layero, index){
							    $("#typename").val(data.typename);
							  },
							btn1: function(index, layero) {
								var typename = $("#typename").val();
								if (typename != "") {
									$.ajax({
										//请求方式
										type: "POST",
										//请求的媒体类型
										// contentType: "application/json;charset=UTF-8",
										//请求地址
										url: "http://localhost/foodtype/update",
										//数据，json字符串
										data: {
											id: data.id,
											typename: typename
										},
										// data : JSON.stringify(list),
										//请求成功
										success: function(result) {
											// 获取当前页码
											let currpage = $('.layui-laypage-em').next()
												.text();
											var data = $.parseJSON(result);
											if (data.code == 0) {
												$("#addform")[0].reset();
												table.reload("test", {
													page: {
														curr: currpage
													}
												});
												layer.closeAll();
											} else {
												layer.msg(data.msg);
												layer.closeAll();
											}

										}
									});
								}else{
									layer.msg("你填空的，玩个锤子!!!");
								}
							},
							cancel: function(layero, index) {
								layer.closeAll();
								$("#addform")[0].reset();
							}

						});
					}
				});
			});
		</script>

	</body>
</html>

